<template>
  <view class="content">
    <view class="header" :style="{ paddingTop: top + 'rpx' }">
      <view class="header_title">我的赏袋</view>
    </view>

    <my-welfare-tab :tab-list="['全部', '宝箱', '福袋', '保险箱']" v-model="tabPosition"></my-welfare-tab>

    <!-- <view class="tab-sub">
      <view
        @click="changeTab(item.id)"
        class="tab_item"
        v-show="item.id !== 4 || tabPosition === 0"
        :class="item.id == status ? 'active' : ''"
        v-for="item in tabData"
        :key="item.id"
      >
        {{ item.name }}
      </view>
    </view> -->
    <view class="all_action" v-if="tabPosition != 2">
      <view class="all_action_left">
        <view class="action_title" @click="qxSclic">全选</view>
        <image class="action_rule" @click="header('/packageB/content/actionRule')"
          src="https://www.dingxians.cn/images/box/rule-help.png"></image>
      </view>
      <view class="all_action_right">
        <view class="action_btn exchange" @click="$no(offer)">
          拒提
        </view>
        <view class="action_btn exchange" v-if="tabPosition == 0 || tabPosition == 3" style="width: auto;box-sizing: border-box;padding: 0 4rpx;" @click="moveSafe(tabPosition != 3 ? '1' : '2')">移{{ tabPosition != 3 ? '入' : '出' }}保险箱
          
        </view>
        <view class="action_btn take" @click="navigateTake()" v-if="tabPosition != 1">提货</view>
        <view class="action_btn" @click="$no(give)" v-if="tabPosition != 1">
          赠送
        </view>
        <view class="action_btn" @click="$no(openBox)" v-if="tabPosition == 1">
          开启
        </view>
      </view>
    </view>

    <scroll-view class="scroll" refresher-background="" :refresher-triggered="refreshStatus" @refresherrefresh="refresh"
      :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
      <view class="box">
        <view class="box_item" v-for="(item, index) in orderData" :key="index"
          :style="[useLevelBg('item', item.level_id)]">
          <view class="box_item_header">
            <view class="box_item_header_left">
              <view class="box_item_title">{{ item.box_name }} [{{ item.resource }}]</view>
            </view>
            <view class="created_at">{{ item.created_at }}</view>
          </view>
          <view class="box-divier"></view>
          <view class="box_item_content">
            <view class="goods-image-bg" @click="detailBtn(item)" :style="[useLevelBg('img', item.level_id)]">
              <image mode="aspectFit" class="goods_image" :src="item.box_prize_image"></image>
              <view class="level-icon" :style="[useLevelBg('icon', item.level_id)]">
                {{ item.level_name }}
              </view>
            </view>
            <view class="goods_info">
              <view class="goods_name">{{ item.blind_box_prize_name }}</view>

              <view class="goods_price_box">
                <view>￥</view>
                <view class="goods_price_int">{{ item.price }}</view>
                <view class="goods_price_ext">参考价</view>
              </view>

              <view class="recovery_price_box">
                <view class="recovery_price">
                  <text class="recovery">
                    拒提价：
                    <text class="price_bold">{{ item.recovery_price }}</text>
                  </text>
                  <image mode="widthFix" class="gold" src="https://www.dingxians.cn/images/shop/money.png"></image>
                </view>
                <view class="goods_num">x{{ item.num }}</view>
              </view>
              <!-- <view class="recovery_price" v-if="item.status == 5 || item.status == 6">参考价:<text class="recovery">￥{{item.price}}</text></view> -->
            </view>
          </view>
          <view class="box-divier"></view>
          <view class="box_tip" v-if="!item.expired && item.status == 1">
            请在
            <text class="box_tip_time">{{ item.expired_at }}</text>
            前提货，过期将只能拒提
          </view>
          <view class="box_tip timeout" v-if="item.expired">
            <image src="https://www.dingxians.cn/images/box/warn.png" class="warn"></image>
            <view>已超时无法提货商品</view>
          </view>
          <view class="box_tip" v-if="item.status == 2">赠送时间：{{ item.give_at }}</view>
          <view class="box_tip" v-if="item.status == 3">拒提时间：{{ item.exchange_at }}</view>
          <view class="box_tip" v-if="item.status == 4">反悔时间：{{ item.back_at }}</view>
          <view class="box_tip" v-if="item.status == 5">提货时间：{{ item.updated_at }}</view>

          <view class="action_btn_group">
            <view class="goods_num" >
                  <my-number-box v-if="item.num > 1" class="number-box" v-model="item.setpValue" :max="item.setpValue" :min="1"></my-number-box>
                </view>
            <view class="p_r_box" @click="selSp(item)" v-if="item.level_id != 10">
              <image v-if="item.flag" src="https://www.dingxians.cn/images/common/selected.png" mode="scaleToFill" />
              <image v-else src="https://www.dingxians.cn/images/common/unselected.png" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <uni-popup ref="bxsppopup" type="center" mask-background-color="rgba(0,0,0,0.8)">
      <view class="big_de_box">
        <view class="top_box"
          style="background-image: url('https://www.dingxians.cn/upload/20250402/67ed233c2a0b8.png');background-size: 100% 100%;">
          <view class="bx_big_box" >
            <view class="dange_bx_box" v-for="val,is in bxDetailList" :key="is">
              <view class="left_box1">
                <image :src="val.goods_image" mode="scaleToFill" />
              </view>
              <view class="right_box1">
                <view class="t_obox1">等级：{{ val.level_name }} ({{ val.num }}/{{ val.original_num   }})</view>
                <view class="t_fbox1">价格：￥{{ val.recovery_price }}</view>
                <view class="t_ebox1">概率：{{ (val.probability *1).toFixed(2) }}%</view>
                <view class="t_jbox1">名称：{{ val.goods_name }}</view>
              </view>
            </view>

          </view>

        </view>
        <view class="guanbi_box"
          style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ee32.png');"
          @click="$refs.bxsppopup.close()">关闭</view>
      </view>

    </uni-popup>
    <uni-popup ref="Resultpopup" type="center" mask-background-color="rgba(0,0,0,0.8)">
      <view class="result_big_box">
        <view class="gxhd_box">
          <image src="https://www.dingxians.cn/upload/20250330/67e91c2da3944.png" mode="widthFix" />
        </view>
        <template v-if="prizeArr.length == 1">
          <view class="jpqy_box">
            <view class="dange_box" v-for="item, index in prizeArr" :key="index"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-legend.png');">
              <view class="dengji_name_box">{{ item.box_prize_level_name }}</view>
              <view class="shang_pin_box">
                <image :src="item.box_prize_image" mode="scaleToFill" />
              </view>
              <view class="jiage_box">
                <view class="l_box">￥{{ item.recovery_price || '0.00' }}</view>
                <view class="r_box">x1</view>
              </view>
              <view class="jg_name_box">{{ item.box_prize_name }}</view>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="jpqy_box1">
            <view class="dange_box1" v-for="item, index in prizeArr" :key="index"
              style="background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-legend.png');">
              <view class="dengji_name_box1">{{ item.box_prize_level_name }}</view>
              <view class="shang_pin_box1">
                <image :src="item.box_prize_image" mode="scaleToFill" />
              </view>
              <view class="jiage_box1">
                <view class="l_box1">￥{{ item.recovery_price || '0.00' }}</view>
                <view class="r_box1">x1</view>
              </view>
              <view class="jg_name_box1">{{ item.box_prize_name }}</view>
            </view>
            <!-- 占位 -->
            <view style="width: 224rpx;"></view>
          </view>
        </template>
        <view class="dibu_box">
          <view class="anniu_box">
            <view class="left_an_box" @click="closeResultpop"
              style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ff58.png');">
              关闭
            </view>
            <!-- <view class="right_an_box"
              style="background-image: url('https://www.dingxians.cn/upload/20250330/67e935095ee32.png');"
              @click="gotoin">
              再来一次
            </view> -->
          </view>

        </view>
      </view>
    </uni-popup>
    <uni-popup ref="popup"  :mask-click="false">
      <view class="pop_box">
        <view class="pop_header">抽到不想要的商品？赠送给想要的好朋友吧</view>

        <view class="user_info">
          <view class="give_search_box">
            <input class="user_id" v-model="giveParams.user_id" placeholder="请输入用户id" />
            <view class="give_search" @click="searchUser()">搜索</view>
          </view>
          <view class="search_user" v-if="giveParams.avatar">
            <image class="search_user_avatar" :src="giveParams.avatar"></image>
            <view class="search_user_info">
              <view class="search_user_id">用户ID:{{ giveParams.user_id }}</view>
              <view>用户昵称:{{ giveParams.nickname }}</view>
            </view>
          </view>
          <view class="give_tip">温馨提示：商品赠送后不可撤销</view>
          <view style="color: white; display: flex; padding: 20rpx 60rpx">
            <text>赠送数量：</text>
            <my-number-box v-model="giveParams.num" :max="giveParams.num" :min="1"></my-number-box>
          </view>
        </view>
        <textarea v-model="giveParams.remark" class="give_remark" placeholder="赠礼留言"></textarea>
      </view>
      <view class="give_btn_group">
        <view class="give_btn give_cancel" @click="cancel()">取消</view>
        <view class="give_btn give_confirm" @click="giveSubmit()">确定</view>
      </view>
    </uni-popup>

    <uni-popup class="app_popup" v-show="showVersion" mode="center" ref="update_app" :mask-click="false">
      <view class="app_pop_box">
        <image class="pop_bg" mode="widthFix" src="http://www.qixdian.cn/upload/20230830/64eeb4f594a71.png"></image>
        <view class="pop_version">
          <view class="pop_header">发现新版本 {{ versionData.version_no }}</view>
          <text class="pop_content">{{ versionData.content }}</text>
        </view>
        <view class="rate" v-if="downStatus">
          <view class="rate_image">
            <liu-progressbar :bgColor="'#DED000'" :progress="percentVal" dsColor="#ccc" color="#FFFFFF"
              :height="'15rpx'" />
          </view>
          <view class="rate_value">{{ percentVal }}%</view>
        </view>
        <view class="down_btn_group" v-else>
          <!-- <view class="down_btn cancel" @click="cancel()">取消</view> -->
          <view class="down_btn down" @click="updateApp()">更新</view>
        </view>
      </view>
    </uni-popup>

    <my-alert-dialog ref="backDialog" title="提示" content="确定要反悔嘛？" @confirm="handleBack"></my-alert-dialog>

    <!-- #ifdef MP-WEIXIN -->
    <my-alert-dialog ref="download_dialog" title="提示" :showConfirm="false" cancelString="关闭">
      <view class="dialog-content" style="text-align: center; margin: 20rpx 0">
        <!-- <image
          style="width: 300rpx; margin: 0 auto"
          src="https://www.dingxians.cn/upload/user_static/common/down_app.png"
          mode="aspectFit"
        /> -->
        <view>请扫码下载App提货</view>
      </view>
    </my-alert-dialog>
    <!-- #endif -->
  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'
import noClick from '../../utils/noClick.js'

export default {
  mixins: [box],
  data() {
    return {
      noClick:true,//节流
      // 状态：1待处理2已赠送3已拒提4已反悔5提货中6已提货
      orderData: [],
      tabData: [
        { id: 1, name: '待处理' },
        { id: 3, name: '已拒提' },
        { id: 2, name: '已赠送' },
        { id: 4, name: '已反悔' },
        { id: 5, name: '提货中' },
        { id: 6, name: '已提货' },
      ],
      page: 1,
      last_page: 0,
      status: 1,
      resultStatus: false,
      refreshStatus: false,
      popStatus: false,
      giveParams: {
        prize_id: '',
        user_id: '',
        remark: '',
        avatar: '',
        nickname: '',
        num: 1,
      },
      top: 80,
      token: uni.getStorageSync('token'),

      version_no: '',
      showVersion: false,
      percentVal: 0,
      versionData: {},
      mask: true,
      downStatus: false,
      tabPosition: 0,
      tabList: ['盲盒', '福利屋'],
      prizeArr:[],//宝箱开启奖品列表
      bxDetailList:[],
    }
  },
  onLoad() { },
  onShow() {
    this.token = uni.getStorageSync('token')
    if (this.token) {
      // this.getData(1)
      this.refresh()
    }
    this.percentVal = 0
    this.showVersion = false
    this.mask = true
    this.downStatus = false
    if (uni.getStorageSync('update_app')) {
      this.getVersion()
    }
  },
  watch: {
    tabPosition() {
      // 监听改变
      this.status = 1
      this.refresh()
    },
  },
  computed: {
    // // 对每个item的不同等级进行分配不同的背景
    // itemLevelBg() {
    //   return (levelId) => {
    //     switch (levelId) {
    //       case 1:
    //         return 'normal';
    //       case 2:
    //         return 'rare';
    //       case 3:
    //         return 'epic';
    //       case 4:
    //         return 'legend';
    //       // 默认将返回不同的背景
    //       default:
    //         return 'normal';
    //     }
    //   };
    // }

    //选择的商品总数
    selectNum() {
      let total_num = 0;
      this.orderData.filter(item => {
        return item.flag == true
      }).forEach((item) => {
        total_num += item.setpValue
      })
      return total_num;
    },
    //选择的商品总价
    selectPrice() {
      let total_price = 0;
      this.orderData.filter(item => {
        return item.flag == true
      }).forEach((item) => {
        total_price += (item.recovery_price * item.setpValue)
      })
      return total_price;
    },
    //选择的要处理的商品id+商品数量
    selectBonusId() {
      return this.orderData.filter(item => {
        return item.flag == true
      }).map(item => {
        return item.id + ':' + item.setpValue;
      })
    },
    //选择的要处理的商品id
    selectBonusIds() {
      return this.orderData.filter(item => {
        return item.flag == true
      }).map(item => {
        return item.id
      })
    },
  },
  methods: {
    detailBtn(item){
      if(item.level_id == 9 || item.level_id == 10){
        this.bxDetailList = item.prize_list
        this.$refs.bxsppopup.open()
      }
    },
    navigateTake() {
      this.header(`/pages/box/takeList?welfare=` + (this.tabPosition !== 0), 1, true)
    },
    // 选择商品进行操i做
    selSp(item) {
      item.flag = !item.flag
      console.log(this.selectBonusId, '选择的要处理的商品id+商品数量')
      console.log(this.selectNum, '选择的商品总数')
      console.log(this.selectPrice, '选择的商品总价')
      console.log(this.selectBonusIds, '选择的要处理的商品id')
    },
    // 全选
    qxSclic(){
      this.orderData.forEach((item)=>{
        item.flag = !item.flag
      })
      console.log(this.selectBonusId, '选择的要处理的商品id+商品数量')
      console.log(this.selectNum, '选择的商品总数')
      console.log(this.selectPrice, '选择的商品总价')
      console.log(this.selectBonusIds, '选择的要处理的商品id')
    },
    //拒提
    offer() {
      let that = this
      if (that.selectNum > 0) {
        uni.showModal({
          title: `确定拒提价值${that.selectPrice}.00的赏品`,
          success: function (res) {
            if (res.confirm) {
              let data = {
                params: that.selectBonusId.toString()
              }
              api.blindBoxOrderPrizes.exchange(data)
                .then((res) => {
                  if (res.code == 200) {
                    that.show('拒提成功')
                    that.refresh()
                  }
                })
            } else {
              console.log('取消')
            }
          }
        })
      } else {
        that.show('请先选择赏品！')
      }
    },
    // 移入保险柜
    moveSafe(type){
//移type==1?'入':'出'保险箱
      let that = this
      if (that.selectNum > 0) {
        uni.showModal({
          title: `确定移${type == 1 ? '入' : '出'}保险箱？`,
          success: function (res) {
            if (res.confirm) {
              let data = {
                params: that.selectBonusId.toString(),
                type: type,
              }
              api.index.boxOrderPrizesLock(data)
                .then((res) => {
                  if (res.code == 200) {
                    that.show(res.msg)
                    that.refresh()
                  }
                })
            } else {
              console.log('取消')
            }
          }
        })
      } else {``
        that.show('清先选择赏品！')
      }
    },
    // 开启宝箱
    openBox(){
      if (this.selectNum > 0) {
        let that = this
        uni.showModal({
          title: "确定开启？",
          success: function (res) {
            if (res.confirm) {
              uni.showLoading({
                title:'开启中，请稍后！'
              })
              let data = {
                id: that.selectBonusId
              }
              api.index.boxOrderPrizesOpenTreasure(data)
                .then((res) => {
                  if (res.code == 200) {
                    that.prizeArr = res.data
                    that.$refs.Resultpopup.open()
                    uni.hideLoading()
                    that.show('开启成功')
                    that.refresh()
                  }
                })
            } else {
              console.log('取消')
            }
          }
        })
        } else {
          this.show('请选择赏品！')
        }
    },
    closeResultpop(){
      this.$refs.Resultpopup.close()
    },
    // 赠送
    give(){
      if (this.selectNum > 0) {
          this.$refs.popup.open('center')
        } else {
          this.show('请选择赏品！')
        }
    },
    handleBack(item) {
      uni.showLoading({
        title: '抽奖中',
      })
      api.blindBoxOrderPrizes
        .back(item.id)
        .then((res) => {
          uni.hideLoading()
          if (res.code == 200) {
            let box_order_id = res.data.box_order_id
            let box_id = item.blind_box_id
            let pay_mode = 1
            this.header(`/pages/index/draw?box_order_id=${box_order_id}&box_id=${box_id}&pay_mode=${pay_mode}`)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    backAction(item) {
      this.$refs.backDialog.show(item)
      /*uni.showModal({
        title: '提示',
        content: `确定反悔吗？`,
        success: (result) => {
          if (result.confirm) {

          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })*/
    },
    checkVersion() {
      let ua = uni.getSystemInfoSync().platform
      if (/ios/i.test(ua)) {
        this.type = 'ios'
      } else if (/android/i.test(ua)) {
        this.type = 'android'
      }
      uni.showLoading({
        title: '检查更新中',
      })
      api.versions
        .check({ refresh: 1, type: this.type, version_no: this.version_no })
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.versionData = res.data
            if (res.data.status == 0) {
              uni.setStorageSync('update_app', 0)
            } else {
              this.showVersion = true
              this.$refs.update_app.open('center')
              uni.setStorageSync('update_app', 1)
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getVersion() {
      plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
        this.version_no = wgtinfo.version
        this.checkVersion()
      })
    },
    updateApp() {
      this.downStatus = true
      this.mask = false
      if (this.type == 'android') {
        this.androidUpdate()
      } else if (this.type == 'ios') {
        this.iosUpdate()
      }
    },
    androidUpdate() {
      let file_size = this.versionData.file_size

      var dtask = plus.downloader.createDownload(this.versionData.url, {}, function (d, status) {
        // 下载完成
        if (status == 200) {
          plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function (error) {
            this.show('安装成功')
          })
        } else {
          this.show('安装失败')
        }
      })
      dtask.start()
      let timer = setInterval(() => {
        let percent = (dtask.downloadedSize / file_size).toFixed(2) // fileSize文件总大小，后端返回的
        this.percentVal = Math.floor(percent * 100) // 转成整数展示
        if (percent >= 1) {
          // 注意百分比，及时清除定时器即可
          clearInterval(timer)
          this.showVersion = false
          this.$refs.pop.close()
        }
      }, 18)
    },
    iosUpdate() {
      plus.runtime.launchApplication(
        {
          action: `${this.versionData.url}`,
        },
        function (e) {
          console.log('Open system default browser failed: ' + e.message)
        },
      )
    },
    searchUser() {
      uni.showLoading({
        title: '搜索用户~',
      })
      api.users
        .search(this.giveParams.user_id)
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.giveParams.nickname = res.data.nickname
            this.giveParams.avatar = res.data.avatar
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // give(id, num) {
    //   this.popStatus = true
    //   this.giveParams.prize_id = id
    //   this.giveParams.num = num
    //   this.$refs.popup.open('center')
    // },
    takeOne(id) {
      // #ifdef MP-WEIXIN
      return this.$refs.download_dialog.show()
      // #endif
      let ids = JSON.stringify([id])
      this.header(`/pages/box/order?ids=${ids}&welfare=` + (this.tabPosition !== 0))
    },
    giveSubmit() {
      if (!this.giveParams.user_id) {
        this.show('请输入用户id')
        return
      }
      uni.showLoading({
        title: '赠送中~',
      })
      let promise
      if (this.tabPosition === 0) {
        promise = api.blindBoxOrderPrizes.give({
          user_id: this.giveParams.user_id,
          params: this.selectBonusId.toString(),
          remark: this.giveParams.remark,
        })
      } else {
        promise = api.welfareHouses.give({
          user_id: this.giveParams.user_id,
          id: this.giveParams.prize_id,
          remark: this.giveParams.remark,
        })
      }
      promise
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.show('赠送成功')
            this.cancel()
            this.refresh()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    cancel() {
      this.$refs.popup.close()
      this.popStatus = false
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getData(1)
    },
    refresh() {
      if (!this.token) {
        this.refreshStatus = false
        this.resultStatus = true
        return
      }

      if (!this.refreshStatus) {
        this.refreshStatus = true
        this.page = 1

        this.getData(2)
      }
    },
    /*
     * type 1 加载更多 2 刷新
     * */
    getData(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      let promise
      if (this.tabPosition === 0) {
        promise = api.blindBoxOrderPrizes.index({ page: this.page, type: 0 })
      } else if (this.tabPosition === 1) {
        promise = api.blindBoxOrderPrizes.index({ page: this.page, type: 8 })
      } else if (this.tabPosition === 2) {
        promise = api.blindBoxOrderPrizes.index({ page: this.page, type: 9 })
      } else if (this.tabPosition === 3) {
        promise = api.blindBoxOrderPrizes.index({ page: this.page, status: 8 })
      }
      promise
        .then((res) => {
          this.refreshStatus = false
          if (res.code === 200) {
            uni.hideLoading()
            this.resultStatus = true
            res.data.data.forEach(item => {
              item.flag = false
              item.setpValue = item.num
            });
            if (type === 1) {
              this.orderData = this.orderData.concat(res.data.data)
            } else {
              this.orderData = res.data.data
            }
            this.last_page = res.data.last_page
          }
        })
        .catch((error) => {
          this.refreshStatus = false
          console.log(error)
        })
    },
    exchange(id) {
      this.header(`/pages/box/exchange?id=${id}&welfare=` + (this.tabPosition !== 0))
    },
    changeTab(id) {
      if (id !== this.status) {
        this.status = id
        this.resultStatus = false
        this.page = 1
        if (!this.token) {
          return
        }
        this.getData(2)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #141414;
  height: 100vh;
  display: flex;
  flex-direction: column;

  // background: linear-gradient(to bottom, #D5C7FA, #E2ECF5);

  .header {
    display: flex;
    justify-content: space-between;
    margin: 0 30rpx;

    .header_title {
      width: 100%;
      text-align: center;
      color: white;
      font-size: 40rpx;
      font-weight: bold;
    }
  }

  .tab-sub {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50rpx;
    /*position: fixed;
    top: 150rpx;
    left: 0;*/
    width: 100%;
    box-sizing: border-box;
    padding: 0 10rpx;
    /* box-sizing: border-box;
		margin: 0 20rpx; */

    .tab_item {
      width: 112rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      margin: 0 10rpx;
      font-size: 26rpx;
      color: #808080;
      /* border: 1px dashed white; */

      &.active {
        border: none;
        color: white;
        background: url('https://www.dingxians.cn/images/box/tab-bg-active.png');
        background-size: 100% 100%;
        // color: #3ee0d8;#D5C7FA
        // background-color: #b8f6e8;
      }
    }
  }

  .nav {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500rpx;
    margin: 20rpx auto;
    border-radius: 20rpx;
    background-color: white;
    overflow: hidden;

    .nav-item {
      /*margin: 0 30rpx;*/
      width: 50%;
      text-align: center;
      box-sizing: border-box;
      padding: 5rpx 20rpx;

      &.active {
        background-color: orange;
        color: white;
      }
    }
  }

  .all_action {
    background: url('https://www.dingxians.cn/upload/user_static/box/box-bg.png');
    background-size: 100% 100%;
    height: 86rpx;
    line-height: 86rpx;
    /*position: fixed;
    top: 215rpx;
    left: 20rpx;*/
    width: 710rpx;
    border-radius: 5rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;

    .all_action_right {
      margin-right: 20rpx;
      color: #fff;
      font-size: 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .action_btn {
        margin-left: 8rpx;
        border: 1rpx solid #fff;
        width: 92rpx;
        line-height: 46rpx;
        height: 46rpx;
        text-align: center;
        background-size: 100% 100%;

        &.take {
          background-image: url('https://www.dingxians.cn/images/box/btn-bg-tihuo.png');
        }

        &.exchange {
          background-image: url('https://www.dingxians.cn/images/box/btn-bg-duihuan.png');
        }

        &.back {
          background-image: url('https://www.dingxians.cn/images/box/btn-bg-houhui.png');
        }
      }
    }

    .all_action_left {
      margin-left: 20rpx;
      display: flex;
      align-items: center;
      font-size: 26rpx;

      .action_title {
        font-weight: bold;
        color: white;
        margin-right: 20rpx;
      }

      .action_rule {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.scroll {
  /*position: fixed;
  top: 310rpx;*/
  margin: 0 auto;
  /*left: 0;*/
  width: 100%;
  overflow-y: hidden;
  flex: 1;

  &::-webkit-scrollbar {
    display: none;
  }
}

.box {
  /* display: flex;
  flex-direction: column; */
  height: 100%;
  margin: 0 20rpx;
  /*height: calc(100vh - 340rpx);*/

  .box_item {
    display: flex;
    background: url('https://www.dingxians.cn/upload/user_static/box/bg-box-normal.png');
    /* animation: anim-box 1s steps(50) infinite;*/
    background-size: 100% 100%;
    /* height: 1000rpx; */
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    flex-direction: column;
    /* padding: 36rpx; */
    /* height: 490rpx; */
    color: white;

    .box_item_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60rpx;
      padding: 20rpx 40rpx 10rpx;
      /* border-bottom: 2rpx solid #e7e7e7; */

      .box_item_header_left {
        /* display: flex;
        align-items: center; */

        .goods_level {
          color: #fff;
          font-size: 24rpx;
          border-top-right-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
          width: 80rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
        }

        .box_item_title {
          /* margin-left: 30rpx; */
          font-weight: bold;
          font-size: 24rpx;
          /* white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; */
        }
      }

      .created_at {
        font-size: 24rpx;
        /* margin-right: 30rpx; */
      }
    }

    .box-divier {
      width: 100%;
      height: 2rpx;

      opacity: 0.16;
      background: linear-gradient(116deg,
          rgba(255, 255, 255, 0) 0%,
          #ffffff 48%,
          rgba(255, 255, 255, 0) 100%,
          #808080 100%);
    }

    .box_item_content {
      display: flex;
      /* padding: 10rpx; */
      /* border-bottom: 1rpx solid #e7e7e7; */
      align-items: center;
      /* margin: 0 20rpx; */
      margin: 10rpx 0;

      .goods-image-bg {
        position: relative;
        background-size: 100% 100%;
        width: 180rpx;
        height: 180rpx;
        background-clip: border-box;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 40rpx;
      }

      .level-icon {
        width: 71rpx;
        height: 28rpx;
        line-height: 28rpx;
        position: absolute;
        background-size: 100% 100%;
        left: 10rpx;
        top: 10rpx;
        font-size: 17rpx;
        box-sizing: border-box;
        padding-left: 30rpx;
      }

      .goods_image {
        display: block;
        width: 160rpx;
        height: 160rpx;
        /* height: 170rpx; */
        /* border: 1rpx solid #e7e7e7; */
      }

      .goods_info {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 190rpx;
        flex: 1;
        margin-right: 40rpx;

        .goods_name {
          /* width: 500rpx; */
          font-size: 32rpx;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .goods_price_box {
          display: flex;
          align-items: center;
          font-size: 24rpx;

          .goods_price_int {
            font-size: 28rpx;
          }

          .goods_price_ext {
            background-color: rgba(255, 255, 255, 0.2);
            font-size: 22rpx;
            margin-left: 10rpx;
            padding: 0 10rpx;
            text-align: center;
            color: white;
            border-radius: 5rpx;
          }
        }

        .recovery_price_box {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .recovery_price {
            color: #ded000;
            font-size: 24rpx;
            display: flex;
            align-items: center;

            .recovery {
              /* margin: 0 10rpx; */

              .price_bold {
                /* font-weight: bold; */
              }
            }

            .gold {
              margin-left: 4rpx;
              width: 34rpx;
              height: 34rpx;
            }
          }

          .goods_num {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }

    .box_tip {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.7);
      margin: 10rpx 0 10rpx 40rpx;

      &.timeout {
        color: red;
        display: flex;
        align-items: center;

        .warn {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }

      .box_tip_time {
        /* font-weight: bold; */
        color: white;
        margin: 0 5rpx;
      }
    }

    .action_btn_group {
      margin: 0 20rpx 20rpx 0;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20rpx;
      .goods_num {
              font-size: 24rpx;
              color: #ffffff;
              margin-right: 30rpx;
              margin-left: 30rpx;
              margin-top: 10rpx;
            }
      .p_r_box {
        width: 58rpx;
        height: 58rpx;

        image {
          width: 100%;
          height: 100%;
          margin-bottom: 10rpx;
        }
      }

      .action_btn {
        width: 92rpx;
        border-radius: 5rpx;
        margin-right: 30rpx;
        height: 46rpx;
        line-height: 46rpx;
        text-align: center;
        background-size: 100% 100%;
        /* border: 1rpx solid #e7e7e7; */
        font-size: 24rpx;

        &.recovery {
          // background-color: #3ee0d8;
          color: #fff;
        }

        &.take {
          background-image: url('https://www.dingxians.cn/images//box/btn-bg-tihuo.png');
        }

        &.exchange {
          background-image: url('https://www.dingxians.cn/images/box/btn-bg-duihuan.png');
        }

        &.back {
          background-image: url('https://www.dingxians.cn/images/box/btn-bg-houhui.png');
        }

        &.give {
          background-color: #141414;
          border: 1rpx solid #fff;
        }
      }
    }
  }
}

.pop_box {
  display: flex;
  flex-direction: column;
  background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-give.png');
  background-size: 100% 100%;
  border-radius: 10rpx;
  width: 655rpx;
  height: 750rpx;

  .pop_header {
    font-size: 24rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    margin-top: 100rpx;
    color: white;
  }

  .user_info {
    display: flex;
    flex-direction: column;

    .give_search_box {
      display: flex;
      justify-content: center;
      font-size: 24rpx;
      margin: 0 auto;
      width: 542rpx;
      height: 80rpx;
      align-items: center;
      background-color: #141414;
      border: 1rpx solid #333122;
      border-radius: 2rpx;

      .user_id {
        flex: 1;
        border-radius: 10rpx;
        margin-right: 10rpx;
        padding: 0 24rpx;
        font-size: 24rpx;
        color: white;

        &::placeholder {
          color: #525252;
        }
      }

      .give_search {
        width: 112rpx;
        height: 52rpx;
        border-radius: 2rpx;
        background-color: #ded000;
        margin-right: 12rpx;
        text-align: center;
        line-height: 52rpx;
        font-weight: bold;
        color: #141414;
      }
    }

    .search_user {
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20rpx 0 0;

      .search_user_avatar {
        border-radius: 50%;
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
      }

      .search_user_info {
        display: flex;
        height: 80rpx;
        flex-direction: column;
        justify-content: space-between;
        color: white;

        .search_user_id {
          color: red;
        }
      }
    }

    .give_tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: red;
      text-align: center;
    }
  }

  .give_remark {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 32rpx 24rpx;
    width: 542rpx;
    background-color: #141414;
    border: 1rpx solid #333122;
    border-radius: 2rpx;

    font-size: 24rpx;
    color: white;

    &::placeholder {
      color: #525252;
    }
  }
}

.give_btn_group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32rpx 30rpx 30rpx 30rpx;

  .give_btn {
    width: 228rpx;
    height: 84rpx;
    background-size: 100% 100%;
    text-align: center;
    line-height: 84rpx;
    border-radius: 10rpx;
    font-size: 30rpx;
    background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png');
    color: #fff;

    &.give_cancel {
      filter: grayscale(1);
    }

    &.give_confirm {
      margin-left: 56rpx;
    }
  }
}

.app_popup {
  .app_pop_box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // background-color: #fff;
    width: 600rpx;
    height: 600rpx;
    border-radius: 10rpx;
    // padding: 20rpx 0;
    position: relative;

    .pop_bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }

    .pop_version {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-top: 100rpx;
      margin-left: 60rpx;

      .pop_header {
        color: #fff;
      }

      .pop_content {
        // padding: 0 20rpx;
        margin-top: 120rpx;
      }
    }

    .rate {
      width: 550rpx;
      margin: 0 auto;
      align-items: center;
      display: flex;

      .rate_image {
        width: 500rpx;
        margin-right: 10rpx;
      }
    }

    .down_btn_group {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .down_btn {
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 24rpx;
        border-radius: 10rpx;

        &.cancel {
          background-color: #ccc;
          color: #999;
        }

        &.down {
          background-color: #a361f6;
          color: #fff;
        }
      }
    }
  }
}



.result_big_box {
  width: 750rpx;
  height: 1400rpx;

  // background-color: pink;
  .gxhd_box {
    width: 599rpx;
    height: 104rpx;
    margin: auto;
    margin-bottom: 100rpx;

    image {
      width: 100%;
    }
  }

  .jpqy_box {
    width: 100%;
    height: 900rpx;
    // background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;

    .dange_box {
      width: 540rpx;
      height: 720rpx;
      background-size: 100% 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 70rpx;

      .dengji_name_box {
        top: 0;
        left: 0;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 130rpx;
        font-weight: 900;
        line-height: 130rpx;
        font-size: 56rpx;
        background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 20rpx;
      }

      .shang_pin_box {
        width: 400rpx;
        height: 400rpx;
        margin: auto;
        margin-bottom: 20rpx;

        image {
          width: 100%;
          height: 400rpx;
        }
      }

      .jiage_box {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        box-sizing: border-box;
        padding: 0 70rpx;
        display: flex;
        justify-content: space-between;

        .l_box {
          font-size: 40rpx;
          font-weight: 900;
          color: #fff;
        }

        .r_box {
          font-size: 40rpx;
          font-weight: 900;
          color: #ccc;
        }
      }

      .jg_name_box {
        box-sizing: border-box;
        font-size: 32rpx;
        width: 100%;
        padding: 0 70rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        color: #fff;
        /* 限制为 3 行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  .jpqy_box1 {
    width: 100%;
    height: 900rpx;
    // background-color: pink;
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 0 18rpx;
    align-items: center;
    margin-bottom: 30rpx;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;

    .dange_box1 {
      flex-shrink: 0;
      width: 224rpx;
      height: 300rpx;
      background-size: 100% 100%;
      position: relative;
      box-sizing: border-box;
      padding-top: 30rpx;
      margin-bottom: 20rpx;

      .dengji_name_box1 {
        top: 10rpx;
        left: 0;
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 50rpx;
        font-weight: 500;
        line-height: 50rpx;
        font-size: 28rpx;
        background: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding-left: 10rpx;
      }

      .shang_pin_box1 {
        width: 170rpx;
        height: 170rpx;
        margin: auto;
        margin-bottom: 10rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .jiage_box1 {
        width: 100%;
        height: 26rpx;
        line-height: 26rpx;
        box-sizing: border-box;
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;

        .l_box1 {
          font-size: 26rpx;
          font-weight: 500;
          color: #fff;
        }

        .r_box1 {
          font-size: 26rpx;
          font-weight: 500;
          color: #ccc;
        }
      }

      .jg_name_box1 {
        box-sizing: border-box;
        font-size: 26rpx;
        width: 100%;
        padding: 0 10rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        color: #fff;
        /* 限制为 3 行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-align: center;
      }
    }
  }

  .dibu_box {
    width: 100%;

    .wenzi_box {
      width: 100%;
      height: 30rpx;
      line-height: 30rpx;
      font-size: 26rpx;
      font-weight: normal;
      line-height: 30rpx;
      letter-spacing: normal;
      color: #FFFFFF;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .anniu_box {
      width: 610rpx;
      height: 84rpx;
      margin: auto;
      display: flex;
      justify-content: center;

      .left_an_box,
      .right_an_box {
        width: 276rpx;
        height: 84rpx;
        background-size: 100% 100%;
        line-height: 84rpx;
        color: #fff;
        font-size: 34rpx;
        text-align: center;
        font-weight: 700;
      }

    }
  }
}



.big_de_box {
  width: 700rpx;
  height: 800rpx;

  .top_box {
    width: 700rpx;
    height: 559rpx;
    margin-bottom: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .bx_big_box {
      width: 640rpx;
      height: 480rpx;
      margin: auto;
      overflow: hidden;
      overflow-y: auto;

      .dange_bx_box {
      width: 640rpx;
      height: 200rpx;
        display: flex;
        justify-content: center;
        margin-bottom: 10rpx;

        .left_box1 {
          width: 200rpx;
          height: 200rpx;
          background-image: url('https://www.dingxians.cn/upload/20250402/67ed28d6e47c4.png');
          background-size: 100% 100%;
          margin-right: 10rpx;

          image {
            width: 200rpx;
            height: 200rpx;
          }
        }

        .right_box1 {
          width: 280rpx;
          height: 200rpx;
          margin-left: 10rpx;

          .t_obox1 {
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 32rpx;
            font-weight: 900;
            color: #DED000;
          }

          .t_fbox1 {
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 32rpx;
            font-weight: 900;
            color: #fff;
          }

          .t_ebox1 {
            width: 100%;
            height: 50rpx;
            line-height: 50rpx;
            font-size: 22rpx;
            font-weight: 900;
            color: #A0A0A0;
          }

          .t_jbox1 {
            width: 280rpx;
            // height: 90rpx;
            // line-height: 90rpx;
            font-size: 22rpx;
            font-weight: 900;
            color: #A0A0A0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /* 限制为 2 行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

      }

      .left_box1 {
        width: 200rpx;
        height: 200rpx;
        background-image: url('https://www.dingxians.cn/upload/20250402/67ed28d6e47c4.png');
        background-size: 100% 100%;
        margin-right: 10rpx;

        image {
          width: 200rpx;
          height: 200rpx;
        }
      }

      .right_box1 {
        width: 280rpx;
        height: 200rpx;
        margin-left: 10rpx;

        .t_obox1 {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 32rpx;
          font-weight: 900;
          color: #DED000;
        }

        .t_fbox1 {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 32rpx;
          font-weight: 900;
          color: #fff;
        }

        .t_ebox1 {
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 22rpx;
          font-weight: 900;
          color: #A0A0A0;
        }

        .t_jbox1 {
          width: 280rpx;
          // height: 90rpx;
          // line-height: 90rpx;
          font-size: 22rpx;
          font-weight: 900;
          color: #A0A0A0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 限制为 2 行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .guanbi_box {
    margin: auto;
    width: 276rpx;
    height: 84rpx;
    background-size: 100% 100%;
    line-height: 84rpx;
    color: #fff;
    font-size: 34rpx;
    text-align: center;
    font-weight: 700;
  }
}
</style>
